"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/12/4
 */
import * as React from 'react'

const {View, ScrollView, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import Colors from "../../assets/styles/Colors";
import WhiteSpace from "../../component/WhiteSpace";
import {AuthPage} from "../../interface/router";
import {toastValidateError} from "../../utils/tools";
import MyText from "../../component/MyText";
import {SCREEN_WIDTH} from "../../constant";

const {createForm} = require('rc-form');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
const {List, InputItem} = require('antd-mobile');

class ChangePasswordPage extends React.Component<AuthPage, any> {

    onSubmit = () => {

        this.props.form.validateFields((errors, payload) => {
            if (errors) {
                toastValidateError(errors);
            } else {
                if (payload.newPassword !== payload.checkPassword) {
                    toastValidateError(null, '两次密码输入不一致请重新输入');
                } else {
                    this.props.dispatch({
                        type: 'auth/changePassword',
                        payload
                    })
                }
            }
        });
    };

    render() {
        const {getFieldProps} = this.props.form;
        return (
            <View style={[commonStyles.container]}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: '修改密码', tintColor: Colors.White}}
                />
                <View style={[commonStyles.flex1]}>
                    <ScrollView>
                        <List>
                            {/*<WhiteSpace color={Colors.Background}/>*/}
                            {/*<InputItem*/}
                            {/*{...getFieldProps('password')}*/}
                            {/*clear*/}
                            {/*type='password'*/}
                            {/*placeholder='目前密码'*/}
                            {/*/>*/}
                            <WhiteSpace color={Colors.Background}/>
                            <InputItem
                                {...getFieldProps('newPassword',
                                    {
                                        initialValue: '',
                                        rules: [
                                            {required: true, message: '请输入新密码'},
                                        ]
                                    })}
                                clear
                                type='password'
                                placeholder='新密码'
                            />
                            <InputItem
                                {...getFieldProps('checkPassword',
                                    {
                                        initialValue: '',
                                        rules: [
                                            {required: true, message: '请确认新密码'},
                                        ]
                                    })}
                                clear
                                type='password'
                                placeholder='确认密码'
                            />
                        </List>
                    </ScrollView>
                </View>
                <TouchableOpacity onPress={this.onSubmit}
                                  style={[commonStyles.centerVH, {
                                      width: SCREEN_WIDTH,
                                      height: autoSize(45),
                                      backgroundColor: Colors.Active
                                  }]}>
                    <MyText color={Colors.White}>确认</MyText>
                </TouchableOpacity>

            </View>
        );
    }
}

const Wrapper = createForm()(ChangePasswordPage);
export default connect(
    ({auth}) => ({auth})
)(Wrapper);